<html>
<head>
  <meta charset="utf-8">
  <title>upload模块快速使用</title>
  <link rel="stylesheet" href="/public/static/index/layui/css/layui.css" media="all">
</head>
<body>
 
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button> 
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
          预览图：
          <div class="layui-upload-list" id="demo2"></div>
       </blockquote>
    </div>


      
<script type="text/javascript" src="/public/static/index/js/jquery-3.4.1.min.js"></script>
<script src="/public/static/index/layui/layui.js"></script>

<script>

layui.use('upload', function(){
  var upload = layui.upload;
  var $ = layui.jquery
   //多图片上传
   upload.render({
    elem: '#test2'
    ,acceptMime: 'image/*'
    ,url: '/qingadmin/uploader/local_upload' //改成您自己的上传接口
    ,multiple: true
    ,accept:'images'
    ,exts:'jpg'
    ,done: function(res){
      var html="<div class='thumbItem'><img src='"+ res.message +"'><input type='hidden' name='thumb[]' value="+ res.message +"><span onclick='prevpic(this)' class='left_menu layui-icon-left layui-icon'></span><span onclick='nextpic(this)' class='right_menu layui-icon-right layui-icon'></span><span class='layui-icon-delete layui-icon' onclick='delImage(this)'></span></div>";
      $('#demo2').append(html);
    }
  });

});


function nextpic(a) {
    var current = $(a).parent();
    var next = $(a).parent().next();
    next.after(current);
  }
  function prevpic(a) {
    var current = $(a).parent();
    var prev = $(a).parent().prev();
    current.after(prev);
  }

function delImage(a){
    var path = $(a).parent().children("input").val();
    var url = "/dongadmin/uploader/delete_img_mul";
    var a=$(a);
    postData = { 'path': path,};
    $.post(url, postData, function (result) {
      result = JSON.parse(result);
      if (result.status == 1) {
        a.parent().remove();
        
        layui.use('layer', function () {
          var layer = layui.layer;
          layer.msg('已经删除成功！');
        });
      }
    });
}
</script>

<style>
  #demo2{
    display: flex;
  }
  .thumbItem{
    position: relative;
    width: 100px;
    margin: 10px;
  }
  .thumbItem img{
    width: 100px;
    height: 100px;
  }
  
  .thumbItem .layui-icon-delete{
    position: absolute;
    bottom: 0;
    color: #fff;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    height: 18px;
    text-align: right;
    left: 0;
  }
  .thumbItem .left_menu{
    left: 0;
    top: 0;
    background: #009688;
    color: #fff;
    position: absolute;
  }
  .thumbItem .right_menu{
    right: 0px;
    top: 0;
    background: #009688;
    color: #fff;
    position: absolute;
  }
</style>

</body>
</html>